<!-- 推荐项目列表 -->
<template>
	<div class="home-rec-wrap com-card">
		<p class="home-greet">嗨，以下是第三方交易师推荐项目</p>
		<div class="home-rec-swiper">
			<spinner v-if="!list.length" class="loading"></spinner>
			<swiper
				ref="swiper"
				:show-dots="dots"
				:aspect-ratio="art"
				v-model="curIdx"
			>
				<swiper-item v-for="item in list" :key="item.id" class="rec-swiper-item" :style="{
					backgroundImage: `url(${item.img})`
				}">
					<div class="rec-desc">
						<p class="city">{{item.city}} {{item.wuye}}</p>
						<p class="title">{{item.title}}</p>
						<p class="deal">{{item.deal}}</p>
					</div>
				</swiper-item>
			</swiper>
			<i class="iconfont icon-l-cir swiper-btn" v-show="needShowPrev" @click="evt_prev"></i>
			<i class="iconfont icon-r-cir swiper-btn" v-show="needShowNext" @click="evt_next"></i>
		</div>
		<div class="home-rec-brief" v-if="curItem">
			<div class="desc">
				<h6 class="price">{{curItem.total_price}}人民币</h6>
				<p class="area">{{curItem.area}}</p>
			</div>
			<div class="link"><a :href="curItem.url">查看详情</a></div>
		</div>
	</div>
</template>
<script type="text/javascript">
	import { Swiper, SwiperItem, Spinner } from 'vux'
	import { QueryMainModel } from '@/model/home.model'

	export default {
		name: 'home-rec-swiper',
		data: () => {
			return {
				QueryMainModel: new QueryMainModel(),
				dots: false,
				art: .74677, // 宽高比
				curIdx: 0,
				list: []
			}
		},
		computed: {
			curItem() {
				return this.list[this.curIdx]
			},
			needShowPrev() {
				return this.curIdx > 0
			},
			needShowNext() {
				return this.curIdx < this.list.length - 1
			}
		},
		async created() {
			let asyncData;
			this.QueryMainModel.setParams({});

			try {
				asyncData = await this.QueryMainModel.go();
			} catch(err) {
				asyncData = err;
			}
			if (asyncData.data && asyncData.data.length) {
				this.list = asyncData.data;
			}
		},
		methods: {
			evt_prev() {
				let maxIdx = this.list.length;
				if (this.curIdx > 0) {
					this.curIdx--;
				}
			},
			evt_next() {
				let maxIdx = this.list.length;
				if (this.curIdx < maxIdx -1) {
					this.curIdx++;
				}
			}
		},
		components: {
			Swiper,
			SwiperItem,
			Spinner
		}
	}
</script>
<style lang="less">
	@import '../../../assets/less/est/all';
	.home-greet {
		font-size: 32/75rem;
		line-height: 45/75rem;
		padding: 20/75rem 30/75rem;
		color: #000;
		background-color: #fff;
	}
	.home-rec-swiper {
		position: relative;
		background-color: #eee;
		.loading {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.rec-swiper-item {
			position: relative;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.rec-desc {
			color: #fff;
			text-align: center;
			padding: 0 80/75rem;
			overflow: hidden;
			p {
				.ellipsis();
			}
			.city {font-size: 28/75rem;}
			.title {font-size: 44/75rem;padding: 30/75rem 0;}
			.deal {font-size: 32/75rem;}
		}
		.swiper-btn {
			position: absolute;
			top: 50%;
			width: 48/75rem;
			height: 48/75rem;
			font-size: 48/75rem;
			color: rgba(255,255,255,.5);
			transform: translateY(-50%);
		}
		.icon-l-cir {
			left: 30/75rem;
		}
		.icon-r-cir {
			right: 30/75rem;
		}
	}
	.home-rec-brief {
		padding: 30/75rem;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.price {
			font-size: 44/75rem;
			line-height: 1.409em;
			color: #ff8800;
		}
		.area {
			font-size: 24/75rem;
			line-height: 33/75rem;
			color: #666;
		}
		.link {
			background:#f1e4cc;
			border-radius:4px;
			width:180/75rem;
			height:88/75rem;
			color:#bd9d62;
			font-size: 24/75rem;
			line-height: 88/75rem;
			text-align: center;
			a {
				display: block;
				color: inherit;
			}
		}
	}
</style>